<template>
  <div id="myChart1" class="kline-BoxMain"></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "deepChart",
  data() {
    return {
      asks: [],
      bids: [],
    };
  },
  mounted() {
    this.drawLine()
  },
  props: {

  },
  computed: {},
  watch: {

  },
  methods: {



    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#FF698A',
                    '#00E4C9',
                    '#5CFAE4',
                    '#FFABBD'
                  ];
                  return colorList[colors.dataIndex];
                }
              },
            },
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            label: {
              formatter: '{name|{b}}\n{time|{c} %}',
              minMargin: 10,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 12,
                  color: '#fff'
                }
              }
            },
            labelLine: {
              normal: {
                length: 10,//第一段表示线
                length2: 30, // 第二段标示线
              },
            },
            data: [
              { value: 10, name: '中单卖出' },
              { value: 15, name: '中单买入' },
              { value: 30, name: '小单买入' },
              { value: 22, name: '小单卖出' },
            ]
          }
        ]
      });
    },
  },
};
</script>
<style scoped>
.kline-BoxMain {
  width: 100%;
  height: 450px;
}
</style>
